<template>
    <div class="box">
        <div class="head">
            <div class="title">
                <div class="back" @click="router.go(-1)"></div>
                <p>{{ route.query.name }}</p>
            </div>
            <div class="Housing">
                <div class="selectTime">
                    <div class="selectTime-left"> {{ route.query.mm }} 月 {{ route.query.dd }} 日 <span> {{
                            route.query.week
                    }}
                        </span></div>
                    <div class="selectTime-InAll"> {{ inday }} 晚</div>
                    <div class="selectTime-right"> {{ route.query.mm }} 月 {{ route.query.selectdd }} 日
                        <span>{{ route.query.selectweek }}</span>
                    </div>
                </div>
                <div class="bedroom">
                    <div class="bedroom-top">
                        <div class="bedroom-top-left">{{ hotel.hotelList.roomTypeName }}</div>
                        <div class="bedroom-top-right">房型详情></div>
                    </div>
                    <p>{{ hotel.hotelList.gpu }}-{{ hotel.hotelList.ram }}-{{ hotel.hotelList.cpu }}</p>
                    <p>{{ hotel.hotelList.area }}-{{ hotel.hotelList.hasWindow }}-{{ hotel.hotelList.bedNum }}</p>
                </div>
                <div class="bedroom">
                    <div class="bedroom-top">
                        <div class="bedroom-top-left1">订房必读</div>
                        <div class="bedroom-top-right">查看详情></div>
                    </div>
                    <p>入住时间: {{ route.query.mm }} 月 {{ route.query.dd }} 日</p>
                    <p>离店时间: {{ route.query.mm }} 月 {{ route.query.selectdd }} 日</p>
                    <p>取消规则</p>
                </div>
            </div>
        </div>
        <div class="order">
            <!-- 入住信息 -->
            <div class="room">
                <div class="room-Information">
                    <p class="room-Information-text">入住信息</p>
                </div>
                <div class="room-Information">
                    <p class="housing-title">住房姓名 :</p>
                    <div class="housing-name">
                        <input type="text">
                    </div>
                </div>
                <div class="room-Information">
                    <p class="housing-title">联系方式 :</p>
                    <div class="housing-name">
                        <input type="text">
                    </div>
                </div>
                <div class="room-Information">
                    <p class="housing-title">到店时间 :</p>
                    <div class="housing-name">
                        2022年12月09日前
                    </div>
                </div>
            </div>

            <!-- 优惠 -->
            <div class="room">
                <div class="room-Information">
                    <p class="room-Information-text">优惠</p>
                </div>
                <div class="room-Information">
                    <p class="housing-title">直抵卷 :</p>
                    <div class="housing-name">
                        暂无可用优惠卷
                    </div>
                </div>
            </div>

            <!-- 房型福利 -->
            <div class="room">
                <div class="room-Information">
                    <p class="room-Information-text">房型福利</p>
                </div>
                <div class="room-Information">
                    <p class="housing-icon">免费停车</p>
                    <div class="housing-name">
                        楼下停车场报销一半(20元)
                    </div>
                </div>
                <div class="room-Information">
                    <p class="housing-icon">延迟退房</p>
                    <div class="housing-name">
                        网鱼电竞酒店会员14:00退房
                    </div>
                </div>
            </div>
        </div>
        <!-- 提交订单 -->
        <div class="PlaceOrder">
            <div></div>
            <div class="PlaceOrder-right">
                <div class="PlaceOrder-right-left">明细
                    <div class="PlaceOrder-right-left-icon"></div>
                </div>
                <div class="PlaceOrder-right-right" @click="goMyOrder">提交订单</div>
            </div>
        </div>
    </div>


</template>

<script setup lang="ts">
import { reactive, onMounted, ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { toRaw } from '@vue/reactivity'
import type { roomListType } from '@/tsList/homeFunts'

//引入pinia
import { storeToRefs } from "pinia"
//引入pinia文件
import { useOrder } from "@/stores/counter"

//使用pinia
const store = useOrder()  //使用公开的方法
let { OrderList } = storeToRefs(store)  //拿到方法里定义的值

const router = useRouter()
const route = useRoute()

const selectdd = ref<any>(route.query.selectdd)
const inday = ref()
const dd = ref<any>(route.query.dd)
const hotel = reactive<{ hotelList: roomListType }>({
    hotelList: {
        area: '',
        bedNum: '',
        broadband: '',
        commonCode: '',
        cpu: '',
        listImage: '',
        discountList: [],
        gpu: '',
        hasWindow: '',
        leastMoney: 0,
        noSmoking: '',
        orderFlag: 0,
        peopleNum: '',
        ram: '',
        roomFlag: 0,
        roomId: 0,
        roomQuantity: 0,
        roomTypeName: '',
        roomTypeWelfareList: [],
        wifi: '',
    }
})

if (route.query.room) {
    let ryrzDetails = JSON.parse(JSON.parse(JSON.stringify(route.query.room)))
    console.log('ryrzDetails', ryrzDetails);

    hotel.hotelList = ryrzDetails
}

const stayHotel = reactive({
    stayHotelList: {
        roomName: route.query.name,
        hotelTime: route.query.mm + '月' + route.query.dd + '日' + '-' + route.query.mm + '月' + route.query.selectdd + '日',
        roomType: hotel.hotelList.roomTypeName,
        price: route.query.hotelPrice,
        listImage: hotel.hotelList.listImage
    }

})

if (selectdd.value && dd.value) {
    inday.value = ref<number>(selectdd.value - dd.value)
}


//跳转到我的订单 顺便修改pinia里面的订单列表
function goMyOrder() {
    let kk = JSON.parse(JSON.stringify(OrderList.value))
    let arr1 = kk;
    arr1.push(stayHotel.stayHotelList)

    //存
    store.$patch((state) => {
        state.OrderList = arr1
    })

    
    router.push({
        //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
        path: '/MyOrder',
    })
}

</script>

<style lang="less" scoped>
.box {
    min-height: 100vh;
}

.head {
    height: 240px;
    background-color: black;
    background-image: linear-gradient(#5b6cd4, #c8cce6, #ededef);
    padding: 0 10px;

    .title {
        display: flex;
        align-items: center;
        padding: 20px 0 10px;
        color: white;
        font-size: 14px;

        .back {
            width: 20px;
            height: 20px;
            background-size: cover;
            background-image: url('@/assets/icon/zf.png');
            margin: 0 5px;
        }
    }

    .Housing {
        height: 175px;
        background-color: white;
        border-radius: 5px;
        padding: 10px;


        .selectTime {
            border-radius: 10px;
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 14px;
            transform: scale(.9);
            transform-origin: 0 0;

            span {
                font-weight: 400;
                font-size: 12px;
                transform: scale(.7);
                color: rgb(146, 146, 146);
            }

            .selectTime-left {
                display: flex;
                align-items: center;
            }

            .selectTime-InAll {
                padding: 0 7px;
                margin: 0 5px;
                font-size: 12px;
                transform: scale(.8);
                color: #909be2;
                border: 1px solid #909be2;
                border-radius: 999px;

            }

            .selectTime-right {
                display: flex;
                align-items: center;
            }
        }
    }

    .bedroom {
        .bedroom-top {
            display: flex;
            justify-content: space-between;

            .bedroom-top-left {
                font-size: 14px;
                font-weight: 600;
            }

            .bedroom-top-left1 {
                font-size: 12px;
                font-weight: 600;
            }

            .bedroom-top-right {
                font-size: 12px;
                color: #7b8add;
            }
        }

        p {
            font-size: 12px;
            color: #999999;
            transform: scale(.8);
            transform-origin: 0 0;
            width: 310px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.order {
    background-image: linear-gradient(#ebebee, #f8f8fa);
    padding: 0 10px 10px;

    .room {
        padding: 0 10px;
        background-color: white;
        border-radius: 5px;
        margin-bottom: 10px;


        .room-Information {
            height: 35px;
            display: flex;
            padding: 5px 0;
            align-items: center;

            .room-Information-text {
                font-weight: 800;
                font-size: 14px;
            }

            .housing-title {
                font-size: 13px;
                margin-right: 10px;
                font-weight: 400;
            }

            .housing-icon {
                color: #5b6cd4;
                font-size: 12px;
                margin-right: 10px;
                background-color: #e8ebff;
            }

            .housing-name {
                flex: 1;
                height: 100%;
                font-size: 12px;
                display: flex;
                align-items: center;
                color: #999999;

                input {
                    width: 100%;
                    height: 100%;
                    background: none;
                    outline: none;
                    border: none;
                }
            }
        }
    }
}

.PlaceOrder {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45px;
    background-color: white;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .PlaceOrder-right {
        color: white;
        display: flex;
        align-items: center;

        .PlaceOrder-right-left {
            color: #999999;
            font-size: 12px;
            padding: 0 10px;
            display: flex;
            align-items: center;

            .PlaceOrder-right-left-icon {
                width: 10px;
                height: 10px;
                background-image: url('@/assets/icon/ZR.png');
                background-size: cover;
                transform: rotate(90deg);
                margin: 0 5px;
            }
        }

        .PlaceOrder-right-right {
            font-size: 13px;
            padding: 10px 25px;
            height: 35px;
            border-radius: 999px;
            background-color: #ed7a22;
            display: flex;
            align-items: center;
        }
    }
}
</style>